import React from 'react';
import { Typography } from 'antd';
import { Question } from '@/types/question';
import MDEditor from '@uiw/react-md-editor';
import CodeMirror from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';

const { Text } = Typography;

interface CodeReadingQuestionProps {
  question: Question;
  readOnly?: boolean;
}

const CodeReadingQuestion: React.FC<CodeReadingQuestionProps> = ({
  question,
  readOnly = true,
}) => {
  return (
    <div className="code-reading-question">
      <div className="question-content">
        <MDEditor.Markdown source={question.content} />
      </div>
      {question.code && (
        <div className="code-block">
          <CodeMirror
            value={question.code}
            height="200px"
            extensions={[javascript()]}
            readOnly={readOnly}
          />
        </div>
      )}
      {question.sub_questions?.map((subQuestion, index) => (
        <div key={subQuestion.id} className="sub-question">
          <Text strong>子问题 {index + 1}</Text>
          <MDEditor.Markdown source={subQuestion.content} />
        </div>
      ))}
    </div>
  );
};

export default CodeReadingQuestion; 